<!--
 * @Author: 梁 卓
 * @Version: V1.0.0
 * @Date: 2024-10-13 20:54:25
 * @LastEditors: 梁 卓
 * @LastEditTime: 2024-10-14 23:03:45
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-10-13 20:54:25
 * @Description: 
-->
<script setup lang="ts">
import { computed, ref, watchEffect, reactive  } from 'vue'
import { useWsLoginStore, LoginStatus } from '@/stores/ws'
import QrCode from 'qrcode.vue'
import { useRecording } from '@/hooks/useRecording';

const loginStore = useWsLoginStore()
const visible = computed({
  get() {
    return loginStore.showLogin
  },
  set(value) {
    loginStore.showLogin = value
  },
})

const loginQrCode = computed(() => loginStore.loginQrCode)
const loginStatus = computed(() => loginStore.loginStatus)
const load = ref(false);
const isUserAccountLogin = ref(false)
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    phoneNumber: '',
    loginPassword: '',
})

const rules = reactive<FormRules>({
    phoneNumber: [
        { required: true, message: '请输入手机号', trigger: 'blur' },  
        {  
            pattern: /^1[3456789]\d{9}$/,  
            message: '请输入正确的手机号格式',  
            trigger: 'blur',  
        },  
    ],
    loginPassword: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
    ],
})





watchEffect(() => {
  // 打开窗口了 而且 二维码没获取，而且非登录就去获取二维码
  if (visible.value && !loginQrCode.value) {
    // 获取登录二维码
    loginStore.getLoginQrCode()
  }
})

const switchToPasswordLogin = () => {
    console.log('切换到账号密码登录')
    // 切换到账号密码登录的逻辑
    isUserAccountLogin.value = !isUserAccountLogin.value
}


const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) {
        return ;
    }
    await formEl.validate((valid, fields) => {
          if (valid) {
            loginStore.getAccountAndPassword(ruleForm)
            // load.value = true
          }
      })
}
</script>

<template>
    <ElDialog class="login-box-modal" :width="376" v-model="visible" center>
        <div class="login-box">
            <img class="login-logo" src="@/assets/logo.jpeg" alt="MallChat"
            @click="switchToPasswordLogin" />
            <p class="login-slogan">边聊边买，岂不快哉~</p>
            <div v-show="!isUserAccountLogin">
            <div class="login-qrcode-wrapper" v-loading="!loginQrCode">
                <QrCode
                class="login-qrcode"
                v-if="loginQrCode"
                :value="loginQrCode"
                :size="328"
                :margin="5"
                />
            </div>

            <p class="login-desc" v-if="loginStatus === LoginStatus.Waiting">
                <ElIcon :size="32" class="login-desc-icon" color="var(--color-wechat)"
                ><IEpSuccessFilled
                /></ElIcon>
                扫码成功~，点击“登录”继续登录
            </p>
            <p class="login-desc" v-if="loginStatus === LoginStatus.Init">
                使用「<strong class="login-desc-bold">微信</strong>」扫描二维码登录~~
            </p>
            </div>

            <div v-show="isUserAccountLogin">
                <el-form
                    ref="ruleFormRef"
                    :model="ruleForm"
                    :rules="rules"
                    class="login-form">
                <el-form-item  prop="phoneNumber">
                    <el-input class="input-with-select"  v-model="ruleForm.phoneNumber" clearable>
                        <template #prefix>
                            <el-icon><Iphone /></el-icon>
                        </template>
                    </el-input>
                </el-form-item> 
                <el-form-item prop="loginPassword">
                    <el-input
                            type="password"
                            v-model="ruleForm.loginPassword"
                            class="input-with-select" clearable>
                        <template #prefix>
                            <el-icon><Lock /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button :loading="load" type="primary" @click="submitForm(ruleFormRef)" style="width: 100%">登录</el-button>
                </el-form-item>
            </el-form>
            </div>
        </div>
    </ElDialog>
</template>

<style lang="scss" src="./styles.scss" scoped />
